<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">天龙八部</div>
<br>
<div class="cls">射雕英雄传</div>
<br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    /*
    获取Element对象：使用Document对象的方法来获取
        * getElementById：根据id属性值获取，返回一个Element对象
        * getElementsByTagName：根据标签名称获取，返回Element对象数组
        * getElementsByName：根据name属性值获取，返回Element对象数组
        * getElementsByClassName：根据class属性值获取，返回Element对象数组

     */

    /* // 1 getElementById
     var img = document.getElementById('light');
       alert(img)
       img.src = '../imgs/on.gif';
   */

    /*Element 对象通用方法
 * style ：设置样式
 * innerHTML:设置内容
 * */
    //   2 getElementsByTagName
    /*  var divs = document.getElementsByTagName('div');
     for(var i=0;i<divs.length;i++){
        // divs[i].style.color='red';
         divs[i].innerHTML='呵呵';
         alert(divs[i])
     }
 */




    //   3.getElementsByName
    var hobbys = document.getElementsByName('hobby');

    for (var i = 0; i < hobbys.length; i++) {
        hobbys[i].checked = true;
        //     alert(hobbys[i])
    }

    /*  var clas = document.getElementsByClassName('cls');
      for (let i = 0; i < clas.length; i++) {
          alert(clas[i])
      }*/


</script>
</body>
</html>